<template>
  <div>
    <div style="overflow: hidden">
      <div key="item.id" style="float: left">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>
            <a data="">个人中心>信息修改</a>
          </el-breadcrumb-item>
          <el-breadcrumb-item></el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>

    <!-- <style="width: 70%; margin-top: 5%"> -->
    <el-form
      style="margin-top: 3%"
      :model="userForm"
      :rules="rules"
      ref="ruleForm"
      label-width="150px"
      class="demo-dynamic"
    >
      <el-form-item
        style="width: 49%"
        v-model="userForm"
        label="昵称"
        prop="nickname"
        :rules="[
          {
            required: true,
            message: '请注意昵称长度在3~15个字符',
            trigger: 'blur',
          },
          { min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ]"
      >
        <el-input v-model="ruleForm.nickname"></el-input>
      </el-form-item>
      <br />
      <el-form-item label="性别" prop="gender">
        <el-select v-model="ruleForm.gender" placeholder="请选择性别">
          <el-option label="女" value="女"></el-option>
          <el-option label="男" value="男"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item
        style="width: 49%"
        label="居住地"
        prop="city"
        :rules="[
          {
            required: false,
            message: '请注意长度在3~20个字符',
            trigger: 'blur',
          },
          { min: 3, max: 20, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ]"
      >
        <el-input v-model="ruleForm.city"></el-input>
      </el-form-item>

      <el-form-item
        style="width: 60%"
        prop="email"
        label="邮箱"
        :rules="[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          {
            type: 'email',
            message: '请输入正确的邮箱地址',
            trigger: ['blur', 'change'],
          },
        ]"
      >
        <el-input v-model="ruleForm.email"></el-input>
      </el-form-item>

      <!-- <el-form-item style="width: 49%" label="密码" prop="password">
        <el-input v-model="ruleForm.password"></el-input>
      </el-form-item> -->

      <el-form-item
        style="width: 80%; height: 120px"
        label="座右铭"
        prop="motto"
        :rules="[
          { required: false, message: '请输入座右铭', trigger: 'blur' },
          {
            min: 0,
            max: 150,
            message: '请注意长度不能超过150个字符',
            trigger: 'blur',
          },
        ]"
      >
        <el-input
          type="textarea"
          style="height: 100px; resize: none"
          v-model="ruleForm.motto"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">提交修改</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
export default {
  name: "InfoeditorList",
  data() {
    return {
      ruleForm: {
        nickname: "",
        gender: "",
        email: "",
        city: "",
        motto: "",
        // password: "",
      },
      username: window.sessionStorage.getItem("token"),
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      // const that = this;
      const { data: res } = await this.$http.get(
        "findUserInfo?username=" + this.username
      );
      // console.log("yyyy");
      // console.log(res);
      this.ruleForm = res.data;
      // console.log("cccc");
      console.log(res);
    },
    async submitForm() {
      const { data: res } = await this.$http({
        url: "editUserInfo", // 后端提供的接口
        method: "post",
        data: this.ruleForm,
        headers: {
          "Content-Type": "application/json",
        },
      });
      this.$router.push("/showinfos");
      this.$message.success(res.msg);
    },
  },
};
</script>
 
<style scoped>
</style>